<template>
  <el-dialog
    title="申诉记录"
    :visible.sync="visible"
    width="75%"
    top="10vh"
    :before-close="closeHandle"
    :close-on-click-modal="false"
    class="user-appeal-list">
    <el-table :data="userAppealList">
      <el-table-column property="appealDesc" header-align="center" align="center" label="申诉内容" width="200">
        <template v-slot="scope">
          <span @click="lookUserAppealHandle(scope.row, true)" class="text" :style="{'--color': themeColor}">
            {{ scope.row.appealDesc }}
          </span>
        </template>
      </el-table-column>
      <el-table-column property="status" header-align="center" align="center" label="申诉状态">
        <template v-slot="scope">
          {{ scope.row.status | statusFormat }}
        </template>
      </el-table-column>
      <el-table-column property="createTime" header-align="center" align="center" label="申诉时间"></el-table-column>
      <el-table-column property="auditDesc" header-align="center" align="center" label="审核回复" width="200">
        <template v-slot="scope">
          <span @click="lookUserAppealHandle(scope.row, false)" class="text" :style="{'--color': themeColor}">
            {{ scope.row.auditDesc }}
          </span>
        </template>
      </el-table-column>
      <el-table-column property="auditTime" header-align="center" align="center" label="审核时间"></el-table-column>
      <el-table-column property="auditUsername" header-align="center" align="center" label="审核员"></el-table-column>
    </el-table>
    <!-- 表格分页插件 -->
    <el-pagination
      @current-change="currentChangeHandle"
      :current-page="page"
      :page-size="limit"
      :total="userAppealSize"
      :disabled="dataLoad"
      layout="total, prev, pager, next, jumper"
      class="paging">
    </el-pagination>

    <!-- 用户申诉信息弹出框（内层弹出框） -->
    <el-dialog
      :title="userAppeal.title"
      :visible.sync="userAppealDialog"
      width="45%"
      top="13vh"
      append-to-body
      :before-close="closeUserAppealDialogHandle"
      :close-on-click-modal="false">
      <el-descriptions size="medium">
        <el-descriptions-item label="审核员">{{ userAppeal.auditUsername }}</el-descriptions-item>
        <el-descriptions-item label="审核时间">{{ userAppeal.auditTime }}</el-descriptions-item>
        <el-descriptions-item label="申诉状态">
          <el-tag :type="userAppeal.status !== 2 ? 'success' : 'danger'">
            {{ userAppeal.status | statusFormat }}
          </el-tag>
        </el-descriptions-item>

      </el-descriptions>
      <!-- 分割线 -->
      <el-divider></el-divider>

      <el-input
        type="textarea"
        rows="10"
        resize="none"
        :value="userAppeal.word">
      </el-input>
    </el-dialog>

  </el-dialog>
</template>

<script>
  export default {
    name: "user-appeal-list",
    data() {
      return {
        // 弹出框显示状态[true-显示 false-不显示]
        visible: false,
        // 风控主键
        riskRecordId: undefined,
        // 用户申诉记录数组
        userAppealList: [],
        // 用户申诉记录个数
        userAppealSize: 0,
        // 数据是否加载[true-加载 false-不加载]
        dataLoad: false,
        // 表格页码
        page: 1,
        // 表格页显示数据大小
        limit: 10,
        userAppeal: {
          // 弹出框标题
          title: undefined,
          // 申诉内容/审核回复
          word: undefined,
          // 申诉状态[0-正在申诉 1-申诉通过 2-申诉拒绝 3-取消风控]
          status: undefined,
          // 审核时间
          auditTime: undefined,
          // 操作审核的用户名称
          auditUsername: undefined
        },
        // 用户申诉信息弹出框是否显示[true-显示 false-关闭]
        userAppealDialog: false
      }
    },
    filters: {
      /**
       * 申诉状态值枚举映射
       * @param status 申诉状态值
       * @return {string} 申诉状态名称
       */
      statusFormat(status) {
        switch (status) {
          case 0:
            return '正在申诉'
          case 1:
            return '申诉通过'
          case 2:
            return '申诉拒绝'
          case 3:
            return '取消风控'
          default:
            return '未知'
        }
      }
    },
    computed: {
      // 主题颜色
      themeColor() {
        return this.$store.state.settings.theme
      },
    },
    methods: {
      /**
       * 初始化用户申诉记录列表方法
       * @param riskRecordId 风控主键
       */
      initUserAppealList(riskRecordId) {
        this.riskRecordId = riskRecordId
        // 弹出框显示
        this.visible = true;

        this.getUserAppealList()
      },
      /**
       * 获取用户申诉记录列表
       */
      getUserAppealList() {
        // 表格数据加载
        this.dataLoad = true

        this.$axios.$get('/index/appeal/list', { params: { riskRecordId: this.riskRecordId, page: this.page, limit: this.limit }})
          .then(({ data:page }) => {
            this.userAppealList = page.list
            this.userAppealSize = page.totalNum
          })
          .catch(() => {})
          .finally(() => {
            // 表格数据加载结束
            this.dataLoad = false
          })
      },
      /**
       * 查看用户申诉记录的申诉内容/审核回复信息
       * @param {Object} userAppeal 用户申诉对象
       * @param {boolean} bool      查看字段[true-appealDesc false-auditDesc]
       */
      lookUserAppealHandle(userAppeal, bool) {
        let _userAppeal = this.userAppeal
        _userAppeal.title = bool ? '申诉详情' : '审核回复'
        _userAppeal.word = bool ? userAppeal.appealDesc : userAppeal.auditDesc
        _userAppeal.status = userAppeal.status
        _userAppeal.auditTime = userAppeal.auditTime
        _userAppeal.auditUsername = userAppeal.auditUsername

        this.userAppealDialog = true
      },
      /**
       * 用户缓存表格页码切换事件
       * @param {number} index 最新页码
       */
      currentChangeHandle(index) {
        if (this.page === index) {
          return
        }
        this.page = index

        this.getUserAppealList()
      },
      /**
       * 弹出框关闭处理事件
       */
      closeHandle() {
        // 弹出框关闭
        this.visible = false;
      },
      /**
       * 关闭申诉详情弹出框事件
       */
      closeUserAppealDialogHandle() {
        this.userAppealDialog = false

        let userAppeal = this.userAppeal
        for (let propKey in userAppeal) {
          userAppeal[propKey] = undefined;
        }
      },
    }
  }
</script>

<style scoped>
  .user-appeal-list >>> .el-dialog__body {
    padding: 20px;
  }
  .user-appeal-list .paging {
    text-align: right;
    margin: 10px;
  }
  .user-appeal-list .text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
  }
  .user-appeal-list .text:hover {
    /*通过预先定义一个变量，防止编译器报错*/
    --color: black;
    color: var(--color);
  }
</style>
